<template>
<!-- 悠闲型男套装 -->
<!-- 产品列表 -->
     <div id="man_wear">
        <van-nav-bar title="悠闲型男套装" left-text="返回" left-arrow
            @click-left="onClickLeft"
             @click-right="onClickRight"
        >
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
        </van-nav-bar>
       <div class="item_img">
            <img src="../assets/images/时尚精选/pic_01.png" alt="">
            <img class="button" src="../assets/images/个人中心/button.png" alt="">
            <img class="lion"
                 src="../assets/images/个人信息/个人信息(绑定手机）狮子_03.png" alt=""
                @click="enter"
            >
            <div class="block" v-show="show">
                <img class="box" src="../assets/images/产品列表/产品列表_03.png" alt="">
                <img  @click="disappear" class="icons" src="../assets/images/产品列表/产品列表__03.png" alt="">
                <div class="box_word" > 
                    <p style="color:#234497;">设计师: vickin_hro</p>
                    <p>设计理念: 纵横二千之零售店及产品均不断创新，并在市场上获得—致的良好口碑。</p>
                </div> 
            </div> 
        </div>
       <div class="footer">
           <!-- 226 -->  
            <ul>
                    <li class="shirt">
                    <img src="../assets/images/产品列表/产品列表_01.png" alt="">
                    <p>Sportsman leisure suit</p>
                    <p>灰色衬衫</p>
                    <p>￥899</p>
                </li>
                <li class="coat">
                    <img src="../assets/images/产品列表/产品列表_03_03.png" alt="">
                    <p>Sportsman leisure suit</p>
                    <p>灰色衬衫</p>
                    <p>￥899</p>
                </li>
                <li class="pants">
                    <img src="../assets/images/产品列表/产品列1_03.png" alt="">
                    <p>Sportsman leisure suit</p>
                    <p>灰色衬衫</p>
                    <p>￥899</p>
                </li>
            </ul>
       </div>
       
    </div>
</template>

<script>
export default {
    name:"ManWear",
    data(){
        return{
           Toast:'',
           show:false,
        }
    },
     methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
    onChange(index) {
    },
    enter(){
        this.show=true 
    },
    disappear(){
        this.show=false
    }
  },
}
</script>

<style lang="less">
    #man_wear{
        background:#fff;
    }
     .item_img{
        width:100%;
        position: relative;
         .button{
            width:94px;
            position: fixed;
            left:38px;
            top:10%;
            border-radius: 50%;
        }
        .lion{
            width:94px;
            position: fixed;
            right:40px;
            bottom:30%;
            border-radius: 50%;
        }
        .box{
            width:670px;
            position: absolute;
            right:44px;
            bottom:15%;
        }
        .icons{
            width:40px;
            position: absolute;
            right:4%;
            bottom:30%;
        }
        .box_word{
            width:610px;
            height:104px;
             position: absolute;
            right:9%;
            bottom:19%;
            p{
                font-size:22px;
                color:#333;
                line-height:36px;
            }
        }
     }
    .item_img img{
        width:100%;
        // 修改 padding-top:100px;
        padding-top:100px;
    //   padding-top:90px;
    }
    .footer{
        width:90%;
        height:248px;
        margin:50px auto;
        img{
            width:150px;
        }
    }
    .footer ul{
        display:flex;
        justify-content:space-between;
    }
    .footer ul>li {
        width:200px;
        float:left;
        font-size:22px;
        color:#333;
        p{
            font-size:22px;
            color:#333;
            white-space:nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align:center;
        }
    }
     .shirt img{
        width:100px;
        margin-left:40px;
    }
     .coat img{
        width:150px;
        margin-left:20px;
    }
    .pants img{
        width:80px;
        margin-left:60px;
    }
</style>
